<script setup lang="ts">
import { ref } from 'vue';
import { useStore } from '../../store';
import ComponentSd from './sider-digital.vue';
import ComponentSb from './sider-bg.vue';
import ComponentSm from './sider-material.vue';
import ComponentSv from './sider-voice.vue';

const store = useStore();
const activeMenu = ref(store.activeMenu);
const menus = [
  {
    title: '数字人',
    icon: 'product-sider_icon_1'
  },
  {
    title: '背景',
    icon: 'product-sider_icon_2'
  },
  {
    title: '道具',
    icon: 'product-sider_icon_3'
  },
  {
    title: '声音',
    icon: 'product-sider_icon_4'
  }
];
function toggleMenu(index: number) {
  activeMenu.value = index;
  store.updateActiveMenu(index);
}

// store.init(); // 初始化素材选项值
</script>

<template>
  <div class="flex">
    <!-- 侧边栏 -->
    <ul class="h-full w-20 border-r border-r-header px-3 pt-7">
      <li
        v-for="(menu, index) in menus"
        :key="menu.title"
        class="menu-item"
        :class="{ active: activeMenu === index }"
        @click="toggleMenu(index)"
      >
        <SvgIcon class="icon" :local-icon="menu.icon"></SvgIcon>
        {{ menu.title }}
      </li>
    </ul>

    <!-- tab 内容 -->
    <div class="flex-1">
      <ComponentSd v-show="activeMenu === 0" class="menu-main" />
      <ComponentSb v-show="activeMenu === 1" class="menu-main" />
      <ComponentSm v-show="activeMenu === 2" class="menu-main" />
      <ComponentSv v-show="activeMenu === 3" class="menu-main" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.menu-item {
  @apply h-14 my-4 flex-center flex-col text-3 text-siderbar_text transition-all cursor-pointer;
  .icon {
    @apply text-7 mb-1.5;
  }

  &.active {
    @apply text-primary;
    .icon {
      @apply text-primary;
    }
    &:hover {
      @apply text-primary;
      .icon {
        @apply text-primary;
      }
    }
  }

  &:hover {
    @apply text-base_text;
    .icon {
      @apply text-base_text;
    }
  }
}

// 切换动画
.menu-main {
  animation-name: animate-fade-in-right;
  animation-duration: 150ms;
}
@keyframes animate-fade-in-right {
  from {
    opacity: 0;
    transform: translateX(10%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 选择列表通用样式
$cardHeight: 180px;
$cardWidth: 136px;
:deep(.list) {
  @apply h-full;
  .list-head {
    @apply pb-6 text-base_text text-4;
  }
  .list-main {
    @apply relative h-[calc(100%-56px)];
    ul {
      @apply h-full grid gap-4 grid-cols-2;
      .item-card {
        width: $cardWidth;
        height: $cardHeight;
        @apply relative rd-2.5 box-border bg-gradient-to-b from-content_hover to-content_hover/40 overflow-hidden;
        &.square {
          // height: $cardWidth;
          height: 139px;
        }
        // 选中状态
        &.active {
          &::after {
            content: '';
            @apply absolute-tl z-10 wh-full rd-2.5 border-primary border-2 border-solid;
          }
        }
        &:hover {
          @apply to-content_hover/20;
        }
      }
    }
  }
}
</style>
